<settings-screen>
  <div class="row">
    <div class="col-md-12">
      <div class="clearfix m-b-10" ng-if="$ctrl.policy.canCreateUser()">
        <a href="users/new" class="btn btn-default" ng-class="{'disabled': !$ctrl.policy.isCreateUserEnabled()}">
          <i class="fa fa-plus"></i> New User</a>
        <users-list-extra></users-list-extra>

        <div class="pull-right">
          <input type="text" class="form-control" placeholder="Search..." autofocus ng-model="$ctrl.searchTerm" ng-model-options="{ allowInvalid: true, debounce: 200 }"
            ng-change="$ctrl.update()" />
        </div>
      </div>

      <div ng-if="$ctrl.currentUser.isAdmin">
        <ul class="tab-nav">
          <li ng-class="{'active': $ctrl.currentPage === 'all'}">
            <a href="users">Active Users</a>
          </li>
          <li ng-class="{'active': $ctrl.currentPage === 'disabled' }">
            <a href="users/disabled">Disabled Users</a>
          </li>
        </ul>
      </div>

      <div ng-if="!$ctrl.loaded" class="list-content text-center">
        <big-message icon="'fa-spinner fa-2x fa-pulse'" message="'Loading...'"></big-message>
      </div>

      <div ng-if="$ctrl.loaded && $ctrl.showEmptyState" class="list-content text-center">
        <big-message message="'Sorry, we couldn\'t find anything.'" icon="'fa-search'"></big-message>
      </div>

      <table class="table table-hover table-border" ng-if="$ctrl.loaded && !$ctrl.showEmptyState">
        <thead>
          <tr>
            <th class="sortable-column" ng-click="$ctrl.paginator.orderBy('name')">
              Name
              <sort-icon column="'name'" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon>
            </th>
            <th class="sortable-column" ng-click="$ctrl.paginator.orderBy('groups')">
              Groups
              <sort-icon column="'groups'" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon>
            </th>
            <th class="sortable-column" ng-click="$ctrl.paginator.orderBy('created_at')">
              Joined
              <sort-icon column="'created_at'" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon>
            </th>
            <th width="1%"></th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="user in $ctrl.paginator.getPageRows()">
            <td>
              <img ng-src="{{ user.profile_image_url }}" height="32px" class="profile__image--settings" />
              <a href="users/{{ user.id }}" ng-class="{'text-muted': user.is_disabled}">{{ user.name }}</a>
              <span class="text-muted"> ({{user.email}})</span>
            </td>
            <td>
              <a ng-repeat="group in user.groups" class="label label-tag" href="groups/{{group.id}}">{{group.name}}</a>
            </td>
            <td>
              <span am-time-ago="user.created_at"></span>
            </td>
            <td>
              <div ng-if="$ctrl.currentUser.hasPermission('admin') && (user.id != $ctrl.currentUser.id)">
                <button type="button" class="btn btn-primary" ng-if="user.is_disabled" ng-click="$ctrl.enableUser(user)">Enable</button>
                <button type="button" class="btn btn-default" ng-if="!user.is_disabled" ng-click="$ctrl.disableUser(user)">Disable</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <paginator paginator="$ctrl.paginator"></paginator>
    </div>
  </div>
</settings-screen>
